@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

body,
.login-pf body,
.login-pf {
  @apply bg-gray-950 text-gray-500;
}

.login-pf-page {
  @apply min-h-screen bg-gray-950 flex flex-col justify-center py-0 md:py-12 md:px-6 lg:px-8;
}

#kc-page-title {
  @apply font-semibold text-left text-2xl;
}

#kc-header,
.login-pf-page-header {
  @apply mb-4;
}

#kc-header-wrapper {
  @apply flex flex-row justify-center items-center space-x-2;
}

#kc-header-logo {
  @apply w-[40px] h-[40px];
}

#kc-header .logo {
  @apply flex flex-row items-center space-x-2 text-lg font-semibold text-white;
}

#kc-locale-wrapper {
  @apply mb-2;
}

div.kc-logo-text span {
  @apply hidden;
}

.card-pf {
  @apply mx-auto w-full border border-t border-gray-850 md:max-w-md bg-gray-950 md:bg-gray-900 py-8 px-4 shadow md:rounded-lg md:px-10;
}

.form-group label {
  @apply block text-sm font-medium text-gray-400 cursor-default pb-1;
}

.form-group input[type='password'],
.form-group input[type='text'],
.form-group .form-input:focus,
.form-group .form-textarea:focus,
.form-group .form-select:focus,
.form-group .form-multiselect:focus {
  @apply block w-full flex-1 rounded-md text-sm disabled:cursor-not-allowed border border-gray-600 bg-gray-800 text-gray-100 placeholder-gray-400 focus:border-pink-500 focus:ring-pink-400 hover:border-gray-500 hover:focus:border-pink-500 disabled:hover:border-gray-600;
}

.form-group input[type='checkbox'] {
  @apply rounded border-gray-300 text-pink-600 shadow-sm focus:border-pink-300 focus:ring focus:ring-offset-0 focus:ring-pink-200 focus:ring-opacity-50;
}

.login-pf-header h1 {
  @apply text-white my-3 sm:my-2;
}

#id-hidden-input {
  @apply hidden;
}

#rememberMe {
  @apply h-4 w-4 text-pink-600 focus:ring-pink-500 border-gray-300 rounded;
}

#kc-form-options {
  label {
    @apply block text-sm text-gray-500;
  }
  a {
    @apply text-link hover:text-link-hover no-underline text-sm;
  }
}

.login-pf-settings {
  @apply flex items-baseline;
}

.login-pf-settings div span a,
.instructionText a {
  @apply font-medium text-link hover:text-link-hover no-underline text-sm;
}

.login-pf-settings div span a:hover,
.instructionText a:hover {
  @apply no-underline;
}

.instruction {
  @apply text-left text-sm text-gray-400;
  @apply mb-2;
  @apply flex flex-col;
}

.instructionText {
  @apply text-left text-sm text-gray-400;
}

#kc-registration a {
  @apply font-medium text-link hover:text-link-hover no-underline text-base;
}

#kc-registration a:hover {
  @apply no-underline;
}

.form-group input[type='checkbox'] {
  @apply p-0;
}

.login-pf-page .card-pf {
  @apply p-8;
}

.login-pf-page .login-pf-signup {
  @apply mt-5;
}

.checkbox,
.radio {
  position: inherit;
  align-items: center;
  display: flex;
  margin-top: 0;
  margin-bottom: 0;
}

.card-pf .form-group:last-child {
  @apply flex flex-col-reverse justify-center items-center;
}

.card-pf #kc-form-options {
  @apply mt-2;
}

.form-group-cgu {
  @apply flex justify-center items-center flex-row;
}

.form-group-cgu {
  margin-left: -1px !important;
}

.form-group-cgu input {
  @apply h-4 w-4 text-pink-600 focus:ring-pink-500 border-gray-300 rounded mb-0.5;
}

.form-group-cgu label {
  @apply ml-2 block text-sm text-gray-900 mb-0;
}

.form-group-cgu label a {
  @apply font-medium text-pink-600 hover:text-pink-500 no-underline text-base;
}

#input-error {
  @apply text-xs text-red-700;
}

.pf-v5-c-dropdown__menu {
  @apply hidden -mt-2.5;
}

.pf-v5-c-dropdown__menu:hover {
  @apply block;
}

#kc-current-locale-link {
  @apply font-medium text-pink-600 hover:text-pink-500;
}

#kc-current-locale-link:hover + .pf-v5-c-dropdown__menu {
  @apply block;
}

#kc-social-providers {
  @apply text-center;
  ul {
    @apply grid grid-cols-2 gap-x-2;
  }
  a {
    @apply text-sm font-semibold flex items-center justify-center rounded-md border border-transparent transition-all bg-gray-800 py-2 px-4 text-white no-underline shadow-sm focus:outline-none focus:ring-0 hover:bg-gray-700 active:scale-95;
  }
  .kc-social-provider-name {
    @apply pl-3 leading-4 flex items-center;
  }
  .kc-social-provider-logo {
    @apply text-xl;
  }
}

#kc-terms-text {
  margin-bottom: 24px;
  text-align: justify;
  a {
    @apply text-pink-600 hover:text-pink-700 no-underline;
  }
}

#kc-form-buttons {
  & > div {
    @apply space-y-4;
  }
}

.pf-v5-c-button {
  @apply w-full flex py-2 px-4 border border-transparent rounded-md justify-center text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-50;
}

.pf-v5-c-button.pf-v5-m-primary {
  @apply shadow-sm text-white bg-pink-600 hover:bg-pink-700;
}

.pf-v5-c-button.btn-default {
  @apply shadow-none bg-none bg-white text-pink-600 hover:text-pink-500;
}

a:focus {
  @apply outline-none focus:ring-1 focus:ring-offset-0 focus:ring-pink-500 rounded-md;
}
